<template>
  <div style="margin: 20px auto;">
    <div style="float:right">
      <let-button size="small" theme="primary"  @click="addItem">{{$t('auth.addPrivilege')}}</let-button>
      <let-button size="small" theme="danger"  @click="delItem">{{$t('auth.delPrivilege')}}</let-button>
    </div>
    <let-form inline itemWidth="200px" @submit.native.prevent="search">
      <let-form-item :label="$t('auth.flag')">
        <let-input size="small" v-model="query.flag"></let-input>
      </let-form-item>
      <let-form-item :label="$t('auth.role')">
        <let-input size="small" v-model="query.role"></let-input>
      </let-form-item>
      <let-form-item label="uid">
        <let-input size="small" v-model="query.uid"></let-input>
      </let-form-item>
      <let-form-item>
        <let-button size="small" type="submit" theme="primary">{{$t('common.search')}}</let-button>
      </let-form-item>
    </let-form>
    <let-table :data="authListShow" stripe :empty-msg="$t('common.nodata')" :title="$t('auth.privilegeManageTitle')">
      <let-table-column width="2%">
        <template slot="head" slot-scope="props">
          <let-checkbox v-model="isCheckedAll"></let-checkbox>
        </template>
        <template slot-scope="scope">
          <let-checkbox v-model="scope.row.isChecked" :value="scope.row.id"></let-checkbox>
        </template>
      </let-table-column>
      <let-table-column :title="$t('auth.flag')" prop="flag" width="15%"></let-table-column>
      <let-table-column :title="$t('auth.role')" prop="role" width="20%"></let-table-column>
      <let-table-column :title="$t('auth.uid')" prop="uid" width="20%"></let-table-column>
      <!--<let-table-column title="操作" width="10%">-->
        <!--<template slot-scope="scope">-->
          <!--<let-table-operation><let-tooltip style="width: 150px;" content="操作">操作</let-tooltip></let-table-operation>-->
        <!--</template>-->
      <!--</let-table-column>-->
      <let-pagination slot="pagination" align="right" v-if="pageCount > 0"  :prev-text="$t('common.prevPage')" :next-text="$t('common.nextPage')"
                      :total="pageCount" :page="page" @change="changePage">
      </let-pagination>
    </let-table>


    <let-modal :title="dialogTitle" v-model="showDialog" width="600px" @on-cancel="onClose" @on-confirm="onConfirm" >
      <div>
        <let-form itemWidth="100%" ref="editForm">
          <let-input type="hidden" v-model="dialog.id"></let-input>
          <let-form-item :label="$t('auth.flag')">
            <let-input size="small"
               v-model="dialog.flag"
               required
               :required-tip="$t('auth.flagTips')"
            ></let-input>
          </let-form-item>
          <let-form-item :label="$t('auth.role')">
            <let-input size="small"
               v-model="dialog.role"
               required
               :required-tip="$t('auth.roleTips')"
            ></let-input>
          </let-form-item>
          <let-form-item :label="$t('auth.uid')">
            <let-input size="small"
               v-model="dialog.uid"
               required
               :required-tip="$t('auth.uidTips')"
               :placeholder="$t('auth.uidPlaceholder')"
            ></let-input>
          </let-form-item>
        </let-form>
      </div>
    </let-modal>
  </div>
</template>

<script>

export default {
  name: 'authPage',
  data() {
    return {
      query:{
        flag: '',
        role: '',
        uid: '',
      },
      isCheckedAll: false,
      authList: [],
      spinning: false,
      sortField: 1,
      sortRule: 0,
      totalCount: 0,
      page: 1,
      eachPageCount: 20,

      //弹出框相关数据
      dialogTitle: '',
      showDialog: false,
      dialog:{
        id: '',
        flag: '',
        role: '',
        uid: '',
      }
    };
  },
  computed:{
    pageCount(){
      return Math.ceil(this.totalCount / this.eachPageCount);
    },
    authListShow(){
      var authList = this.authList.slice((this.page-1) * this.eachPageCount, this.page * this.eachPageCount);
      this.isCheckedAll = false;
      authList.forEach((auth)=>{
        auth.isChecked = false;
      });
      return authList;
    }
  },

  methods: {
    search(){
      this.getAuthList(this.query.flag, this.query.role, this.query.uid);
    },
    getAuthList(flag, role, uid){
      const loading = this.$Loading.show();
      this.$ajax.getJSON('/api/auth/page/getAuthList', {flag: flag||'', role:role||'', uid: uid||''}).then((data)=>{
        loading.hide();
        data.forEach((auth)=>{
          auth.isChecked = false;
        })
        this.authList = data;
      this.totalCount = data.length;
    }).catch((err) => {
        loading.hide();
        this.$tip.error(`${this.$t('auth.loadListError')}: ${err.err_msg || err.message}`);
      })
    },
    changePage(val){
      this.page = val
    },
    addItem(){
      this.dialogTitle = this.$t('auth.addPrivilege');
      this.showDialog = true;
      this.dialog.id = '';
      this.dialog.flag = '';
      this.dialog.role = '';
      this.dialog.uid = '';
    },
    onConfirm(){
      if(!this.$refs.editForm.validate()){
        return;
      }
      var uids = this.dialog.uid?this.dialog.uid.split(/;|,/g) : [];
      var params = [];
      uids.forEach((uid)=>{
        if(uid){
          params.push({
            flag: this.dialog.flag,
            role: this.dialog.role,
            uid: uid
          })
        }
      });
      const loading = this.$Loading.show();
      var url = '/api/auth/page/addAuth';
      this.$ajax.postJSON(url, {auth: params}).then((data)=>{
          loading.hide();
          this.showDialog=false;
         this.$tip.success(this.dialogTitle + this.$t('common.success'));
          this.search();
       }).catch((err)=>{
        loading.hide();
        this.$tip.error(`${this.dialogTitle}${this.$t('common.failed')}: ${err.err_msg || err.message}`);
      })
    },
    onClose(){},
    delItem(){
      this.$confirm(this.$t('auth.confirmDelete'), this.$t('common.confirmTitle')).then(()=>{
        var ids = [];
        this.authListShow.forEach((auth)=>{
            if(auth.isChecked === true){
              ids.push(auth.id);
            }
        });
        if(!ids.length){
          this.$tips.error(this.$t('auth.selectRecord'));
          return;
        }
        const loading = this.$Loading.show();
        this.$ajax.postJSON('/api/auth/page/pageDeleteAuth', {id: ids}).then((data)=>{
            loading.hide();
            this.$tip.success(this.$t('auth.delSucc'));
            this.search();
        }).catch((err)=>{
            loading.hide();
            this.$tip.error(`${this.$t('auth.delError')}: ${err.err_msg || err.message}`);
        })
      })
    }
  },
  mounted(){
    this.getAuthList();
  },
  watch:{
    isCheckedAll() {
      const isCheckedAll = this.isCheckedAll;
      this.authListShow.forEach((item) => {
          item.isChecked = isCheckedAll;
      });
    },
  }
};
</script>
<style>
  .top-title{
    margin: 16px 0;
    line-height: 2.5;
    font-size: 18px;
    border-bottom: 1px solid #c5d9e8;
  }
  .login-page{
    width: 500px;
    margin-top: 100px;
  }
</style>
